<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="topbar::static">
</head>

<body>
<!--引用公用的导航栏-->
<nav th:replace="topbar::topbar"></nav>
<div class="container-fluid">
    <div class="row">
        <div th:replace="topbar::sidebar(activeUri='template.html')"></div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            <h1 class="page-header">5GC MANO</h1>
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#createTemplate">
                新增Template
            </button>
            <!--<h2 class="sub-header">Section title</h2>-->
            <div class="table-responsive">
                <table class="table table-striped">
                    <thead>
                    <tr>
                        <th>id</th>
                        <th>templateName</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr th:each="template:${templates}">
                        <td th:text="${template.id}"></td>
                        <td th:text="${template.templateName}"></td>
                        <td>
                            <button type="button" class="btn btn-primary" aria-label="Left Align" data-toggle="modal"
                                    data-target="#checkTemplateDetail"
                                    th:onclick="|checkTemplateDetail(${template.id})|">
                                查看并编辑模板详细内容
                            </button>
                            <button type="button" class="btn btn-danger" aria-label="Left Align"
                                    th:onclick="|deleteTemplate(${template.id})|">
                                <span class="glyphicon glyphicon-remove"></span>
                            </button>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!--模态框，用于查看并编辑模板详细内容-->
<div id="checkTemplateDetail" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog"
     aria-labelledby="myLargeModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">模板详细内容</h4>
            </div>
            <div class="modal-body">
                <table class="table table-striped">
                    <thead>
                    <tr>
                        <th>id</th>
                        <th>templateName</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>
                            <input class="form-group" id="id" readonly="readonly">
                        </td>
                        <td>
                            <input class="form-group" id="templateName">
                        </td>
                    </tr>
                    </tbody>
                    <form role="form">
                        <div class="form-group">
                            <textarea id="fileContent" class="form-control" rows="15"
                                      style="font-size: 18px"></textarea>
                        </div>
                    </form>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="updateTemplate()">保存</button>
            </div>
        </div>
    </div>
</div>

<!--模态框，用于查看并编辑模板详细内容-->
<div id="createTemplate" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog"
     aria-labelledby="myLargeModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">模板详细内容</h4>
            </div>
            <div class="modal-body">
                <table class="table table-striped">
                    <thead>
                    <tr>
                        <th>id</th>
                        <th>templateName</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>
                            <input class="form-group" id="createId" readonly="readonly">
                        </td>
                        <td>
                            <input class="form-group" id="createTemplateName">
                        </td>
                    </tr>
                    </tbody>
                    <form role="form">
                        <div class="form-group">
                            <textarea id="createFileContent" class="form-control" rows="15"
                                      style="font-size: 18px"></textarea>
                        </div>
                    </form>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="createTemplate()">保存</button>
            </div>
        </div>
    </div>
</div>


</body>

<script th:inline="javascript">
    var baseUrl = "http://"+hostIp+":8003/template/";

    function createTemplate() {
        //异步创建模板
        var url = baseUrl + "create";
        $.ajax({
            url: url,
            type: "POST",
            data: {
                "id": $("#createId").val(),
                "templateName": $("#createTemplateName").val(),
                "fileContent": $("#createFileContent").val()
            },
            complete: function (id) {
                alert("模板创建成功");
                reload();
            }
        });
    }

    function checkTemplateDetail(id) {
        var templates = [[${templates}]];
        templates.forEach(function (template) {
            if (id == template.id) {
                $("#fileContent").val(template.fileContent);
                $("#templateName").val(template.templateName);
                $("#id").val(id);
            }
        });
    }

    function updateTemplate() {
        //异步更新模板
        var url = baseUrl + "update";
        $.ajax({
            url: url,
            type: "POST",
            data: {
                "id": $("#id").val(),
                "templateName": $("#templateName").val(),
                "fileContent": $("#fileContent").val()
            },
            complete: function (id) {
                alert("模板保存成功");
                reload();
            }
        });
    }

    function deleteTemplate(id) {
        var url = baseUrl + "delete";
        $.ajax({
            url: url,
            type: "POST",
            data: {
                "id": id
            },
            complete: function (id) {
                alert("模板删除成功");
                reload();
            }
        });
    }

    function reload() {
        $("#checkTemplateDetail").modal('hide');
        $("#createTemplate").modal('hide');
        window.location.reload();
    }
</script>
</html>
